<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket测试</title>
</head>
<body>


<input type="text" id="text"><button onclick="sendText()">发送</button>
<input type="file" id="f" onchange="chooseFile()">

<div id="main">

</div>



<script type="text/javascript">



    var ws = new WebSocket("ws://localhost:8080/websocket/uid_1/to/cid_2")

    ws.onopen = function (ev) {

        console.log("------连接服务器成功-----")

    }

    ws.onerror=function (ev) {
        console.log("------连接服务器出错-----")
    }


    //接收消息
    ws.onmessage=function (ev) {

        //解析json
        var json = JSON.parse(ev.data);

        //1为文本消息
        if(json.code==1){
            document.querySelector("#main").innerHTML="<p>"+json.msg+"</p>"+document.querySelector("#main").innerHTML;
            //2为图片消息
        }else if(json.code==2){

            document.querySelector("#main").innerHTML='<img width="150px" src='+json.msg+'>'+document.querySelector("#main").innerHTML;
        }


    }

    //发送文本消息
    function sendText() {

        var msg = document.querySelector("#text").value

        if(msg){


            ws.send(JSON.stringify({code:0,msg:msg}));

            document.querySelector("#text").value=""
        }

    }


    //发送图片消息
    function chooseFile() {


        var files = document.querySelector("#f").files


        if(files.length>0){
            var fileReader = new FileReader();

            fileReader.readAsDataURL(files[0])

            fileReader.onload=function (e) {

                var s = JSON.stringify({code:1,msg:e.target.result});

                ws.send(s)

            }
        }

    }


</script>
</body>
</html>
